<template>
	<view class="bind">
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">已绑定用户</block>
		</cu-custom>
		<view class="top-input padding-sm ">
			<input type="text" class="input-block radius" placeholder="请输入昵称或手机号进行查询"
				v-model="searchQuery.nameOrPhone" />
			<view class="text-white bg-red text-center radius button-block " style="line-height: 65rpx;"
				@click="search">
				查询
			</view>
		</view>
		<scroll-view class="cards" @scrolltolower="getNextPage" scroll-y="true" :scroll-top="scrollTop"
			:lower-threshold="35" @scroll="scroll">
			<view class="card-item margin-top margin-sm padding-sm" v-for="item in cards" :key="item.id">
				<image :src="item.headimgUrl" mode="" class="left-avatar"> </image>
				<view class="right-contxt">
					<text class="nickName">{{item.nickName}}</text>
					<text class="bottomContxt">手机号:{{item.phone}}</text>
					<text class="bottomContxt">来源直播:{{item.liveName?item.liveName:'-'}}</text>
					<text class="bottomContxt">绑定时间:{{item.times?item.times:'-'}}</text>
					<text class="bottomContxt">最近观看时间:{{item.entryTime?item.entryTime:'-'}}</text>
				</view>
			</view>
			<view :class="'cu-load bg-gray '" v-if="loadMore">
				没有更多了
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const app = getApp();
	import api from "utils/api";
	export default {
		data() {
			return {
				loadMore:false,
				theme: app.globalData.theme,
				windowHeight: '',
				current: 1,
				pages: 100,
				searchQuery: {
					nameOrPhone: ''
				},
				cards: [

				],
				total: null,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			search() {
				this.goTop()
				this.current = 1
				this.pages = 100
				this.total = null
				this.cards = []
				this.init()
			},
			init() {
				if (this.current > this.pages) {
				 this.loadMore=true
				} else {
					 this.loadMore=false
					api.tzBindRecord(this.searchQuery, this.current).then(res => {
						this.cards = this.cards.concat(res.data.records)
						this.pages = res.data.pages
						this.total = res.data.total
					})
				}
			},
			getNextPage() {
				this.current += 1
				this.init()
			}
		},
		onLoad() {
			this.init()
		},
	}
</script>

<style lang="scss" scoped>
	.bind {
		padding-bottom: 65rpx;
		position: relative;

		.top-input {
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 999;
			height: 100rpx;
			background: #f1f1f1;
			width: 100%;

			.input-block {
				height: 100%;
				border: 1px #acacac solid;
				width: 500rpx;
				padding-left: 40rpx;
				background: #f1f1f1;
			}

			.button-block {
				height: 100%;
				width: 150rpx;
				margin-left: 20rpx;
			}

		}

		.cards {
			position: absolute;
			z-index: 5;
			padding-top: 125rpx;
			height: 87vh;
			padding-bottom: 5rpx;

			.card-item {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.left-avatar {
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
				}

				.right-contxt {
					width: 320rpx;
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					text {
						display: block;
						font-size: 24rpx;
						color: gray;
					}

					.nickName {
						font-weight: bolder;
						color: black;
						font-size: 26rpx;
						word-break: break-all;
					}
				}
			}
		}
	}
</style>